
 <!-- 准考证预览 -->
<template>
  <div class="divs">
    <el-card
      class="docketprintContainer"
      shadow="never"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="docketprintText">
        <div class="TestData" style="font-size: 14px">
          <table border="1" cellspacing="0" align="center">
            <caption style="margin-bottom: 10px">
              <h2 align="center">
                {{ item.mainName }}
              </h2>
            </caption>
            <tr align="center">
              <td width="130" height="30">准考证号</td>
              <td width="146" height="30" colspan="3">
                {{ item.userCertNo }}
              </td>
              <td rowspan="4">
                <!-- <img style="width: 100px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2018-12-18%2F5c189caf18341.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670980452&t=4ff1dcaae41eb9338035990e50e9e6ea" alt=""> -->
                <img :src="item.userPic" alt="" />
              </td>
            </tr>
            <tr align="center">
              <td width="130" height="30">姓名</td>
              <td width="146" height="30" colspan="3">{{ item.userName }}</td>
            </tr>
            <tr align="center">
              <td width="130" height="30">身份证号码</td>
              <td width="146" height="30" colspan="3">
                {{ item.userIdCard }}
              </td>
            </tr>
            <tr align="center">
              <td width="130" height="30">考点</td>
              <td width="146" height="30" colspan="3">{{ item.locName }}</td>
            </tr>
            <tr align="center">
              <td width="130" height="30">考场号</td>
              <td width="146" height="30" colspan="2">{{ item.userRoomNo }}</td>
              <td width="135" height="30">座位号</td>
              <td width="120" height="30">{{ item.userRoomNumer }}</td>
            </tr>
          </table>
        </div>
        <div class="testTime" style="margin-top: 10px; font-size: 14px">
          <table border="1" cellspacing="0" align="center">
            <tr align="center">
              <th width="194" height="30">考试科目</th>
              <th width="194" height="30">考试日期</th>
              <th width="194" height="30">考试起止时间</th>
            </tr>
            <tr
              align="center"
              v-for="(it, index) in item.paperInformation"
              :key="index"
            >
              <td width="194" height="30">{{ it.subjectName }}</td>
              <td width="194" height="30">
                {{ it.subjectTime[0] }}
              </td>
              <td width="194" height="30">
                {{ it.subjectTime[1][0] }}-{{ it.subjectTime[2] }}
              </td>
            </tr>
          </table>
        </div>
        <div class="testRule" style="width: 100%; margin-top: 20px">
          <h4 class="testTitle" style="text-align: center">考场规则</h4>
          <div
            class="detailRule"
            style="padding: 10px 15px; width: 100%; height: 550px"
          >
            <div class="rule" v-html="item.examExplain">
            </div>
          </div>
        </div>
        <div class="footer">{{ index + 1 }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  admissionCardList,
  addAdmissionCard,
} from "@/api/testManagement/examAttendanceDocket.js";
export default {
  data() {
    return {
      examId: this.$route.params.examId,
      list: [],
    };
  },
  created() {
    this.CardList();
  },
  mounted() {},

  methods: {
    async CardList() {
      try {
        await addAdmissionCard({ examId: this.examId });
        const res = await admissionCardList({
          examId: this.examId,
          pageSize: 1000,
        });
        console.log(res.rows, "res.rows");
        if (res.code == 200) {
          if (res.rows.length != 0) {
            this.list = res.rows;
            console.log(this.list, "===========list");
            this.list.forEach((item) => {
              item.paperInformation = JSON.parse(item.paperInformation);
              console.log(item.paperInformation);
            });
            console.log(this.list,'----');

            this.list.forEach((item) => {
              item.paperInformation.forEach((it) => {
                it.subjectTime = it.subjectTime.split(" ");
              });
            });
            this.list.forEach(item => {
              item.paperInformation.forEach(it => {
                it.subjectTime[1] = it.subjectTime[1].split('至')
              })
            })
            console.log(this.list);
          } else {
            this.$message.error("暂无数据");
          }
        } else {
          this.$message.error("数据获取失败");
        }
      } catch (error) {
        console.log(error);
      }
      // console.log(res, "w2");
      // console.log(this.list);
      // let a = ''
      // this.list.forEach((item) => {
      //   a += item.paperInformation
      // });
      // console.log(a);
    },
  },
};
</script>

<style lang="scss" scoped>
.setExamAttendanceDocket {
  width: 100%;
  height: 100%;
}

.divs {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.docketprintContainer {
  width: 45%;
  margin-bottom: 10px;
}
.docketprintText {
  width: 100%;
  height: 600px;
  margin-bottom: 10px;
}
.footer {
  font-size: 12px;
  padding-top: 20px;
  text-align: center;
}
.rule {
  white-space: pre-wrap;
  text-indent: -5px;
  font-size: 14px;
}
.testRule {
  height: 270px;
}
</style>